import * as React from "react";
import {
    Box,
    Button,
    Paper,
    Stack,
    Table,
    TableCell,
    TableContainer,
    TableHead,
    TableRow,
    TextField, Typography
} from "@mui/material";
import {useState} from "react";
import {useAddAdmin} from "../../hooks/useAddAdmin.ts";
import {useDeleteAdmin} from "../../hooks/useDeleteAdmin.ts";
import {useCheckAdmin} from "../../hooks/useCheckAdmin.ts";

interface Data {
    id: string;
    name: string;
}

const Admin: React.FC = () => {
    const {checkAdmin, data, error2} = useCheckAdmin();
    const [attendanceData, setAttendanceData] = React.useState<Data[]>([]);

    React.useEffect(() => {
        const fetchAttendance = async () => {
            await checkAdmin();
            if (error2) {
                console.log(error2);
                return;
            }
            if (data) {
                const dataArray: Data[] = JSON.parse(data);
                setAttendanceData(dataArray);
            }
        };
        fetchAttendance();
    }, [data]);

    const [deleteAdminText, setDeleteAdminText] = useState('删除管理员');
    const [deleteAdminId, setDeleteAdminId] = useState('');
    const [deleteAdminName, setDeleteAdminName] = useState('');
    const {deleteAdmin, isLoading1, error1} = useDeleteAdmin();

    const handleDeleteAdmin = async () => {
        await deleteAdmin(deleteAdminId, deleteAdminName);
        if (error1) {
            setDeleteAdminText(error1);
            setTimeout(() => {
                setDeleteAdminText('删除管理员');
            }, 3000);
            return;
        }

        setDeleteAdminText('删除成功');
        setTimeout(() => {
            setDeleteAdminText('删除管理员');
        }, 3000);
    }

    const [addAdminText, setAddAdminText] = useState('新增管理员');
    const [name, setName] = useState('');
    const [id, setId] = useState('');
    const [password, setPassword] = useState('');
    const {addAdmin, isLoading, error} = useAddAdmin();

    const handleAddAdmin = async () => {
        await addAdmin(id, name, password);
        if (error) {
            setAddAdminText(error);
            setTimeout(() => {
                setAddAdminText('新增管理员');
            }, 3000);
            return;
        }

        setAddAdminText('新增成功');
        setTimeout(() => {
            setAddAdminText('新增管理员');
        }, 3000);
    };

    return (
        <Box>
            <Stack direction="row" spacing={3} sx={{marginTop: 1, marginBottom: 1, justifyContent: 'space-between'}}>
                <Stack direction="row" spacing={3}>
                    {/*新增管理员姓名*/}
                    <TextField label="新增管理员的姓名" variant="standard"
                               onChange={(e) => setName(e.target.value)}/>
                    {/*新增管理员账号*/}
                    <TextField label="新增管理员的账号" variant="standard"
                               onChange={(e) => setId(e.target.value)}/>
                    {/*新增管理员密码*/}
                    <TextField label="新增管理员的密码" variant="standard"
                               onChange={(e) => setPassword(e.target.value)}/>
                    {/*新增管理员按钮*/}
                    <Button variant="contained"
                            disabled={isLoading}
                            onClick={handleAddAdmin}
                            sx={{
                                backgroundColor: '#21C491',
                                '&:hover': {backgroundColor: '#1EB384'}
                            }}>{addAdminText}</Button>
                </Stack>
                <Stack direction="row" spacing={3}>
                    {/*删除管理员账号*/}
                    <TextField label="删除管理员的账号" variant="standard"
                               onChange={(e) => setDeleteAdminId(e.target.value)}/>
                    {/*删除管理员姓名*/}
                    <TextField label="删除员工的姓名" variant="standard"
                               onChange={(e) => setDeleteAdminName(e.target.value)}/>
                    {/*删除管理员按钮*/}
                    <Button variant="contained"
                            disabled={isLoading1}
                            onClick={handleDeleteAdmin}
                            sx={{
                                backgroundColor: '#21C491',
                                '&:hover': {backgroundColor: '#1EB384'}
                            }}>{deleteAdminText}</Button>
                </Stack>
            </Stack>
            <Typography variant="body2"
                        sx={{marginTop: 1, marginBottom: 1}}>管理员账号非工号，请编写时与工号相区分</Typography>
            <TableContainer component={Paper}>
                <Table sx={{minWidth: 350}}>
                    {/*表头*/}
                    <TableHead>
                        <TableRow>
                            <TableCell>管理员账号</TableCell>
                            <TableCell>管理员姓名</TableCell>
                        </TableRow>
                    </TableHead>

                    <tbody>
                    {attendanceData.map((row) => (
                        <TableRow key={row.id}>
                            <TableCell>{row.id}</TableCell>
                            <TableCell>{row.name}</TableCell>
                        </TableRow>
                    ))}
                    </tbody>
                </Table>
            </TableContainer>
        </Box>
    );
};

export default Admin;
